<template>
  <div>
    <PageHeader hidden-breadcrumb>
        <template #title><div class="demo-title">分步表单</div></template>
        <template #content>
          <div class="demo-content">将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。</div>
        </template>
    </PageHeader>
    <Card style="margin:20px;">
        <Row>
            <i-col :xs="24" :sm="20" :md="16" :lg="12" :xl="12" :offset="6">
                <Steps :current="current">
                    <Step title="填写转账信息"></Step>
                    <Step title="确认转账信息"></Step>
                    <Step title="完成"></Step>
                </Steps>
                <Form v-if="current==1||current==0" ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100" style="margin-top:20px;" label-colon>
                    <FormItem label="付款账户" prop="mail1">
                        <Select v-model="formValidate.mail1" v-if="current==0">
                            <Option value="x1@xx.xxx">x1@xx.xxx</Option>
                            <Option value="x2@xx.xxx">x2@xx.xxx</Option>
                            <Option value="x3@xx.xxx">x3@xx.xxx</Option>
                        </Select>
                        <span v-else>
                            {{formValidate.mail1}}
                        </span>
                    </FormItem>
                    <FormItem label="收款账户" prop="mail2">
                        <Input v-model="formValidate.mail2" v-if="current==0">
                            <template #prepend>
                                <Select v-model="select1" style="width: 80px">
                                    <Option value="微信">微信</Option>
                                    <Option value="支付宝">支付宝</Option>
                                </Select>
                            </template>
                        </Input>
                        <span v-else>
                            {{formValidate.mail2}}
                        </span>
                    </FormItem>
                    <FormItem label="收款人姓名" prop="name">
                        <Input v-model="formValidate.name" v-if="current==0"></Input>
                        <span v-else>
                            {{formValidate.name}}
                        </span>
                    </FormItem>
                    <FormItem label="转账金额" prop="amount">
                        <Input v-model="formValidate.amount" prefix="logo-usd" v-if="current==0"/>
                        <span v-else>
                            {{formValidate.amount}}
                        </span>
                    </FormItem>
                    <Divider v-if="current==1"></Divider>
                    <FormItem label="支付密码" prop="password" v-if="current==1">
                        <Input v-model="formValidate.password" type="password"/>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" :loading="loading" @click="handleSubmit('formValidate')">{{current==0?'下一步':'提交'}}</Button>
                        <Button style="margin-left:10px;" v-if="current==1" @click="current=0">上一步</Button>
                    </FormItem>
                </Form>
                <Result v-if="current==2" style="margin-top:20px;" type="success" title="操作成功" desc="预计两小时内到账">
                    <template #extra>
                        <div>付款账户： {{formValidate.mail1}}</div>
                        <div>收款账户： {{formValidate.mail2}}</div>
                        <div>收款人姓名： {{formValidate.name}}</div>
                        <div>转账金额： {{formValidate.amount}}</div>
                    </template>
                    <template #actions>
                        <Button type="primary" @click="current=0">再转一笔</Button>
                        <Button style="margin-left:10px;">查看账单</Button>
                    </template>
                </Result>
            </i-col>
        </Row>
        <Divider v-if="current==0"></Divider>
        <Alert v-if="current==0">
            <p>说明</p>
            <p>转账到微信</p>
            <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
            <p>转账到支付宝</p>
            <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
        </Alert>
    </Card>
  </div>
</template>

<script>
export default {
    data () {
        return {
            select1:'微信',
            current:0,
            loading:false,
            formValidate: {
                name: 'Henry',
                mail1: 'x1@xx.xxx',
                mail2: 'q1@xx.xxx',
                amount: 100,
                password:'123456'
            },
            ruleValidate: {
                name: [
                    { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                ],
                mail1: [
                    { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
                    { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
                ],
                mail2: [
                     { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
                    { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
                ],
                amount: [
                    { required: true,type:'number', message: 'amount cannot be empty', trigger: 'change' }
                ],
                password: [
                    { required: true, message: 'password cannot be empty', trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        handleSubmit (name) {
            var time = 0;
            if(this.current==1){
                this.loading = true
                time = 2000
            }
            setTimeout(() => {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.current++;
                        this.loading = false
                    } else {
                        this.$Message.error('Fail!');
                        this.loading = false
                    }
                })
            }, time);
        },
        handleReset (name) {
            this.$refs[name].resetFields();
        }
    }
}
</script>
